<template>
  <div>
    <LayoutH :options="options" style="height: 15vh">
      <template v-slot:title>
        <div class="title">
          <span>线路分销市场</span>
        </div>
      </template>
      <template v-slot:destination>
        <div></div>
      </template>
    </LayoutH>
    <div class="layout_right_textcontent">
      <div id="el-table">
        <el-table :data="tabelData" height="59.64vh" style="width: 97%">
          <el-table-column label="图片" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.img.file_url" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="线路名" style="overflow: hidden" width="270">
            <template slot-scope="scope">
              <span>{{ scope.row.route_title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发布方" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.agency_price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="代理价(元)"
            prop="agency_price"
            sortable
            width="120"
          >
            <!-- <template slot-scope="scope"> -->
            <!-- <span>{{ scope.row.agency_price }}</span> -->
            <!-- </template> -->
          </el-table-column>
          <el-table-column label="市场参考价(元)" width="140">
            <template slot-scope="scope">
              <span>{{ scope.row.channel_sales }}</span>
            </template>
          </el-table-column>
          <el-table-column label="线路类型" width="140">
            <template slot-scope="scope">
              <span>{{ scope.row.category }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目的地" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.destination }}</span>
            </template>
          </el-table-column>
          <el-table-column label="行程天数" width="80">
            <template slot-scope="scope">
              {{ scope.row.days }}
            </template>
          </el-table-column>
          <el-table-column label="含默认导游" width="100">
            <template slot-scope="scope">
              {{ scope.row.is_has_default_guide == 0 ? "否" : "是" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180">
            <template slot-scope="scope">
              <!-- 分销该线路 -->
              <span
                class="green"
                v-if="scope.row.is_distribution == 0"
                @click="distributionline()"
                >分销该线路</span
              >
              <span
                class="green"
                @click="$router.push({ name: 'DistributionDetails' })"
                >详情</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 3vh">
        <el-pagination
          background
          hide-on-single-page
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="total_count"
          :current-page="pagedata.page_no"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import LayoutH from "@/components/Layoutheader.vue";
import myDistribution from "@/mixins/distri/distriAdmin.js"; //业务都在这
export default {
  components: { LayoutH },
  mixins: [myDistribution],
  data() {
    return {
      tabelData: [], // 渲染数据
      total_count: 0, // 页数
      pagedata: {
        page_on: 1,
        page_size: 10,
      },
      options: [
        { value: 1, label: "未通过" },
        { value: 2, label: "待上架" },
        { value: 3, label: "已上架" },
      ],
    };
  },
};
</script>

<style lang="less">
.layout_right_textcontent #el-table {
  margin-top: 2vh;
  img {
    position: relative;
    top: 0.4vh;
    border-radius: 8px;
    height: 12vh;
    width: 12vh;
  }
}
</style>